/*样式重置*/
* {
  /*去掉默认边距*/
  margin: 0;
  padding: 0;
  /*内减模式*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*去掉移动端点击高亮效果*/
  -webkit-tap-highlight-color: transparent;
}
body {
  font-size: 14px;
  font-family: 'Microsoft Yahei', 'Courier New', Courier, monospace;
  color: #333;
}
ul,
ol {
  list-style: none;
}
a,
a:hover {
  text-decoration: none;
  color: #333;
}
input {
  /*边框*/
  border: none;
  /*轮廓线*/
  outline: none;
  /*去除表单在移动 阴影 3D效果*/
  -webkit-appearance: none;
}
/*公共样式*/
.fl {
  float: left;
}
.fr {
  float: right;
}
/*清除浮动*/
.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
  line-height: 0;
  height: 0;
  visibility: hidden;
}
.jd-sprite {
  background: url('../images/jd-sprites.png') no-repeat;
  background-size: 200px;
}
/*公共布局*/
body {
  background-color: #ccc;
}
.layout {
  max-width: 640px;
  min-width: 320px;
  height: 1800px;
  background-color: #fff;
  margin: 0 auto;
}
/*公共头部*/
.header {
  top: 0;
  left: 0;
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  height: 44px;
  background-image: -webkit-linear-gradient(#eee, #bbb);
  padding: 0 44px;
}
.header .back,
.header .menu {
  position: absolute;
  top: 0;
  width: 41px;
  height: 44px;
  padding: 11px;
  /*背景原点*/
  background-origin: content-box;
  /*背景裁剪*/
  background-clip: content-box;
}
.header .back {
  left: 0;
  background-position: -24px 0;
}
.header .menu {
  right: 0;
  background-position: -60px 0;
}
